<template>
    <v-expansion-panel bg-color="#E8EAF6">
        <v-expansion-panel-title>
            <v-row no-gutters>
                <v-col
                    cols="4"
                    class="d-flex justify-start"
                >
                    LAYOUT
                </v-col>
            </v-row>
        </v-expansion-panel-title>
        <v-expansion-panel-text>
            <div style="margin: 5px 0 5px 0; display: flex">
                <v-select
                    hide-details
                    density="compact"
                    :label="attr.style.display === '' ? 'display' : ''"
                    variant="solo-filled"
                    :items="[
                        'null',
                        'none',
                        'block',
                        'flex',
                        'inline',
                        'grid',
                        'sticky'
                    ]"
                    :value="attr.style.display"
                    @update:modelValue="
                        (value) => {
                            if (value === 'null') {
                                value = ''
                            }
                            attr.style.display = value
                            designStore.rerender()
                        }
                    "
                ></v-select>
                <v-select
                    hide-details
                    density="compact"
                    :label="attr.style.position === '' ? 'position' : ''"
                    variant="solo-filled"
                    :items="[
                        'null',
                        'absolute',
                        'relative',
                        'fixed',
                        'static',
                        'sticky'
                    ]"
                    :value="attr.style.position"
                    @update:modelValue="
                        (value) => {
                            if (value === 'null') {
                                value = ''
                            }
                            attr.style.position = value
                            designStore.rerender()
                        }
                    "
                ></v-select>
            </div>
            <div
                v-if="['flex', 'grid'].includes(attr.style.display)"
                style="
                    margin: 10px 0 5px 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                "
            >
                <v-tooltip location="top">
                    <template v-slot:activator="{ props }">
                        <v-icon
                            :style="{
                                color:
                                    attr.style.justifyContent === 'left'
                                        ? 'black'
                                        : 'grey'
                            }"
                            style="margin: 0 3px 0 10px"
                            icon="mdi-format-align-left"
                            v-bind="props"
                            @click="
                                () => {
                                    attr.style.justifyContent =
                                        attr.style.justifyContent === 'left'
                                            ? ''
                                            : 'left'
                                    designStore.rerender()
                                }
                            "
                        ></v-icon> </template
                    >水平居左
                </v-tooltip>
                <v-tooltip location="top">
                    <template v-slot:activator="{ props }">
                        <v-icon
                            :style="{
                                color:
                                    attr.style.justifyContent === 'center'
                                        ? 'black'
                                        : 'grey'
                            }"
                            style="margin: 0 3px 0 3px"
                            icon="mdi-format-align-center"
                            v-bind="props"
                            @click="
                                () => {
                                    attr.style.justifyContent =
                                        attr.style.justifyContent === 'center'
                                            ? ''
                                            : 'center'
                                    designStore.rerender()
                                }
                            "
                        ></v-icon> </template
                    >水平居中
                </v-tooltip>
                <v-tooltip location="top">
                    <template v-slot:activator="{ props }">
                        <v-icon
                            :style="{
                                color:
                                    attr.style.justifyContent === 'right'
                                        ? 'black'
                                        : 'grey'
                            }"
                            style="margin: 0 15px 0 3px"
                            icon="mdi-format-align-right"
                            v-bind="props"
                            @click="
                                () => {
                                    attr.style.justifyContent =
                                        attr.style.justifyContent === 'right'
                                            ? ''
                                            : 'right'
                                    designStore.rerender()
                                }
                            "
                        ></v-icon> </template
                    >水平居右
                </v-tooltip>
                <v-tooltip location="top">
                    <template v-slot:activator="{ props }">
                        <v-icon
                            :style="{
                                color:
                                    attr.style.alignItems === 'start'
                                        ? 'black'
                                        : 'grey'
                            }"
                            style="margin: 0 3px 0 15px"
                            icon="mdi-format-align-top"
                            v-bind="props"
                            @click="
                                () => {
                                    attr.style.alignItems =
                                        attr.style.alignItems === 'start'
                                            ? ''
                                            : 'start'
                                    designStore.rerender()
                                }
                            "
                        ></v-icon> </template
                    >垂直居上
                </v-tooltip>
                <v-tooltip location="top">
                    <template v-slot:activator="{ props }">
                        <v-icon
                            :style="{
                                color:
                                    attr.style.alignItems === 'center'
                                        ? 'black'
                                        : 'grey'
                            }"
                            style="margin: 0 3px 0 3px"
                            icon="mdi-format-align-middle"
                            v-bind="props"
                            @click="
                                () => {
                                    attr.style.alignItems =
                                        attr.style.alignItems === 'center'
                                            ? ''
                                            : 'center'
                                    designStore.rerender()
                                }
                            "
                        ></v-icon> </template
                    >垂直居中
                </v-tooltip>
                <v-tooltip location="top">
                    <template v-slot:activator="{ props }">
                        <v-icon
                            :style="{
                                color:
                                    attr.style.alignItems === 'end'
                                        ? 'black'
                                        : 'grey'
                            }"
                            style="margin: 0 10px 0 3px"
                            icon="mdi-format-align-bottom"
                            v-bind="props"
                            @click="
                                () => {
                                    attr.style.alignItems =
                                        attr.style.alignItems === 'end'
                                            ? ''
                                            : 'end'
                                    designStore.rerender()
                                }
                            "
                        ></v-icon> </template
                    >垂直居下
                </v-tooltip>
            </div>
            <div style="margin: 5px 0 5px 0; display: flex">
                <v-text-field
                    clearable
                    hide-details="auto"
                    density="compact"
                    label="x轴/%"
                    variant="solo-filled"
                    :value="attr.style.left.replace('%', '')"
                    @update:modelValue="
                        (value) => {
                            attr.style.left = value + '%'
                            designStore.rerender()
                        }
                    "
                ></v-text-field>
                <v-text-field
                    clearable
                    hide-details="auto"
                    label="y轴/%"
                    density="compact"
                    variant="solo-filled"
                    :value="attr.style.top.replace('%', '')"
                    @update:modelValue="
                        (value) => {
                            attr.style.top = value + '%'
                            designStore.rerender()
                        }
                    "
                ></v-text-field>
            </div>
            <v-divider
                class="border-opacity-100"
                thickness="4"
                color="info"
                style="margin-top: 10px"
            ></v-divider>
            <v-card
                color="#E8EAF6"
                style="padding: 0px"
            >
                <div
                    class="container"
                    style="margin-top: 5px"
                >
                    <h4 class="title">background:</h4>
                    <div style="justify-content: flex-end">
                        <ColorPicker
                            :attrAttr="attr"
                            :selectedColor="attr.style.backgroundColor"
                            colorName="backgroundColor"
                        ></ColorPicker>
                    </div>
                </div>
                <v-divider style="margin: 10px"></v-divider>
                <div style="margin: 5px 0 5px 0; display: flex">
                    <h4 style="padding: 0 5px 0 5px; color: grey">opacity:</h4>
                    <v-slider
                        style="margin: 0 10px 0 0"
                        v-model="opacity"
                        max="1"
                        step="0.1"
                        thumb-color="black"
                        hide-details
                        thumb-label
                    ></v-slider>
                </div>
            </v-card>
            <CornerArea
                :attrAttr="attr"
                styleName="margin"
                title="margin:"
                iconTipName="全部外边距,独立外边距"
            ></CornerArea>
            <CornerArea
                :attrAttr="attr"
                styleName="padding"
                title="padding:"
                iconTipName="全部内边距,独立内边距"
            ></CornerArea>
            <borderArea :attrAttr="attr"></borderArea>
            <CornerArea
                :attrAttr="attr"
                styleName="borderRadius"
                title="radius:"
                iconTipName="全部圆角,独立圆角"
            ></CornerArea>
            <ShadowArea :attrAttr="attr"></ShadowArea>
            <RotateArea></RotateArea>
        </v-expansion-panel-text>
    </v-expansion-panel>
</template>

<script>
import { useDesignStore } from '../../../../../../stores/design'
import ColorPicker from './ColorPicker.vue'
import CornerArea from './CornerArea.vue'
import BorderArea from './BorderArea.vue'
import ShadowArea from './ShadowArea.vue'
import RotateArea from './RotateArea.vue'

export default {
    name: 'LayoutArea',
    components: {
        CornerArea,
        BorderArea,
        ShadowArea,
        ColorPicker,
        RotateArea
    },
    props: {
        attrAttr: Object
    },
    data() {
        return {
            designStore: useDesignStore(),
            attr: this.attrAttr,
            opacity: 1
        }
    },
    mounted() {
        this.opacity = this.attrAttr.style.opacity
    },
    watch: {
        opacity(newValue, oldValue) {
            if (oldValue !== '') {
                this.attr.style.opacity = newValue
                this.designStore.rerender()
            }
        }
    }
}
</script>
